<template>
  <van-config-provider
      id="app"
      :theme-vars="themeVars"
      :class="{'padding-tab-bar':$route.meta.tabBar||false}">
    <!--全局加载框 start-->
    <van-overlay :custom-style="{backgroundColor:'rgba(255,255,255,0)',zIndex:9999999}" :show="loading">
      <div class="flex-row justify-center align-center" style="height: 100%;" @click.stop>
        <van-loading color="#1989fa"/>
      </div>
    </van-overlay>
    <!--全局加载框 end-->

    <StateBar
        v-if="$route.meta.stateBar && $route.meta.stateBar.show"
        :title="$route.meta.title || ''"
        :show-back="$route.meta.stateBar.showBack||false"
        :right-text="$route.meta.stateBar.rightText||''"/>

    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component"/>
      </keep-alive>
    </router-view>
    <TabBar v-if="$route.meta.tabBar"/>
  </van-config-provider>
</template>

<script lang="ts">
import Config from "./config/Config";
import {defineComponent} from "vue";
import {mapState, useStore} from "vuex";
import StateBar from "@/components/common/StateBar.vue";
import TabBar from "@/components/common/TabBar.vue";

export default defineComponent({
  components: {
    StateBar,
    TabBar,
  },
  data() {
    return {
      // 全局主题配置
      // https://vant-contrib.gitee.io/vant/v3/#/zh-CN/config-provider
      themeVars: {
        dangerColor: '#FA3C32',
        red: '#FA3C32',
        buttonDangerBackgroundColor: '#FA3C32',
      }
    }
  },
  setup() {
    const store = useStore()
  },
  created() {
    this.visibilityChange();
  },
  mounted() {
    this.initIosHeight();
    this.prohibitScaling();
  },
  computed: {
    ...mapState('app', [
      'loading'
    ])
  },
  methods: {
    visibilityChange() {
      document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'visible') { // 解决ios等锁屏导致的socket断线不会重连问题


        }
      });
    },
    // 解决IOS端100%高度问题
    initIosHeight() {
      // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
      // Then we set the value in the --vh custom property to the root of the document
      const vh = window.innerHeight, vw = window.innerWidth
      const vmw = Math.min(Config.maxViewPort, vw);
      document.documentElement.style.setProperty('--vh', `${vh}px`)
      document.documentElement.style.setProperty('--vw', `${vw}px`)
      document.documentElement.style.setProperty('--vwm', `${vmw}px`)
      // We listen to the resize event
      window.addEventListener('resize', () => {
        // We execute the same script as before
        const vh = window.innerHeight, vw = window.innerWidth;
        const vmw = Math.min(Config.maxViewPort, vw);
        document.documentElement.style.setProperty('--vh', `${vh}px`)
        document.documentElement.style.setProperty('--vw', `${vw}px`)
        document.documentElement.style.setProperty('--vwm', `${vmw}px`)
      })
    },
    // ios双击缩放禁止
    prohibitScaling() {
      document.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
          event.preventDefault();
        }
      });
      let lastTouchEnd = 0;
      document.addEventListener('touchend', function (event) {
        let now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
          event.preventDefault();
        }
        lastTouchEnd = now;
      }, false);
      document.addEventListener('gesturestart', function (event) {
        event.preventDefault();
      });
    },
  },
})
</script>
<style>
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #F7F8FA;
}
</style>
<style lang="less" scoped>
#app {
  min-height: var(--vh);
  min-width: var(--vwm);

  .padding-tab-bar {

    padding-bottom: 60px;
  }
}
</style>
